<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试人员信息管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>

    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
    <script src="/js/jquery-3.4.1.min.js"></script>
</head>

<!--修改信息表单-->
<div class="layui-row" id="editTester" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" lay-filter="updatefilter" style="margin-top:20px">
            <!--id设置，隐藏起来，但不能去掉，后台根据这个修改当前问题-->
            <input type="hidden" name="id">

            <div class="layui-form-item">
                <label class="layui-form-label">测试人员姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="testerName" required lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">测试人员手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="phonenum" required lay-verify="required" autocomplete="on"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px" id="check">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="updateTester">保存</button>
                    <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                </div>
            </div>
        </form>

    </div>
</div>

<!--模糊搜索-->
<form class="layui-form" action="" style="margin-top: 10px">
    <div class="layui-inline">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="testerName" placeholder="请输入姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="phonenum" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="selectFormfilter">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="myButton">重置</button>
        </div>
    </div>
</form>


<div class="layui-row" id="drawtu" style="display:none;">
    <div id="main"
         style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;">
    </div>
    <div class="layui-btn-container">
        <button id="downloadBtn" class="layui-btn" onclick="downloadPdf()">下载为PDF文件</button>
    </div>
    <div class="layui-btn-container">
        <button id="send" class="layui-btn" >发送至邮箱</button>
    </div>

</div>


<table id="demo" lay-filter="test"></table>

<script type="text/html" id="hangbarDemo">
    <!-- <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">修改</a> -->
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="see">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="remove"><i class="layui-icon">&#xe640;</i>删除
        </button>
    </div>
</script>

</body>
<script>

    //自定义layui组件的目录
    layui.config({
        base: '/js/'
    }).extend({echarts:"echarts"})


    // 使用模块
    layui.use(['layer', 'table', 'form', 'jquery','echarts'], function () {
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var echarts=layui.echarts;
        //第一个实例
        var myecharts=echarts.init(document.getElementById("main"))
        var myTable = table.render({
            elem: '#demo'
            , height: 500
            , url: '/tester/selectAllColor' //数据接口
            , page: true //开启分页
            , limit: 10
            , limits: [5, 10, 15, 20, 30, 50, 100]
            , toolbar: '#toolbarDemo'  // 头部栏事件
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'}  //复选框
                    , {field: 'testerId', title: 'ID', width: 80, sort: true, fixed: 'left'}  //表头
                    , {field: 'testerName', title: '测试人员姓名', width: 120}
                    , {field: 'phonenum', title: '测试人员电话', width: 120}
                    , {field: 'testTime', title: '测试日期', width: 160}
                    , {field: 'redCount', title: '红色性格', width: 100}
                    , {field: 'blueCount', title: '蓝色性格', width: 100}
                    , {field: 'yellowCount', title: '黄色性格', width: 100}
                    , {field: 'greenCount', title: '绿色性格', width: 100}
                    , {fixed: 'right', width: 300, align: 'center', toolbar: '#hangbarDemo'}  //每行的操作按钮设置
                ]
            ]
        });

        //头部工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                // 新增
                case 'add':
                    break;
                // 删除
                case 'remove':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        // layer.msg('删除');
                        layer.confirm('真的要删除所选行嘛', function (index) {
                            console.log(data)
                            var idList = [];
                            //把当前行的id放到list列表中，传到后端
                            for (let i = 0; i < data.length; i++) {
                                idList[i] = data[i].testerId;
                            }
                            idList.push(data.idList)
                            $.ajax({
                                url: "/tester/delete",
                                type: "post",
                                dataType: "JSON",
                                data: {idList: idList},
                                success: function (ret) {
                                    if (ret.code == 0) {
                                        // 刷新表格数据
                                        myTable.reload({
                                            page: {
                                                curr: 1 //重新从第1页开始
                                            }
                                        });
                                        layer.msg(ret.msg, {icon: 6});
                                    } else {
                                        layer.msg(ret.msg, {icon: 5});
                                    }
                                }
                            })
                            layer.close(index);
                            // 向服务器发送删除指令
                        });
                    }
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'update') {
                console.log(data)
                form.val('updatefilter', {
                    "testerId": data.testerId
                    , "phonenum": data.phonenum
                    , "testerName": data.testerName
                    , "testTime": data.testTime
                });
                layer.open({
                    type: 1,
                    offset: '10px',
                    title: "修改测试人信息",
                    area: ['500px', '400px'],
                    content: $("#editTester")  //弹窗中的内容
                });
            } else if (layEvent === 'delete') {
                // layer.msg("删除操作")
                layer.confirm('真的要删除当前行嘛', function (index) {
                    // console.log(data)
                    var idList = [];
                    //把当前行的id放到list列表中，传到后端
                    idList.push(data.testerId);
                    $.ajax({
                        url: "/tester/delete",
                        type: "post",
                        dataType: "JSON",
                        data: {idList: idList},
                        success: function (ret) {
                            if (ret.code == 0) {
                                // 刷新表格数据
                                myTable.reload({
                                    page: {
                                        curr: 1 //重新从第1页开始
                                    }
                                });
                                layer.msg(ret.msg, {icon: 6});
                            } else {
                                layer.msg(ret.msg, {icon: 5});
                            }
                        }
                    })
                    layer.close(index);
                    // 向服务器发送删除指令
                });
            } else if (layEvent === 'see') {
                console.log(data)
                var resultVo = {
                    yellowCount: data.yellowCount,
                    blueCount: data.blueCount, redCount: data.redCount,
                    greenCount: data.greenCount
                };
                var downloadPdf = document.getElementById("downloadBtn");

                var option = {
                    title: {
                        text: '性格分析结果',
                        subtext: '红黄蓝绿性格',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['红色性格', '黄色性格', '蓝色性格', '绿色性格']
                    },
                    series: [
                        {
                            name: '选项次数',
                            type: 'pie',
                            radius: '40%',
                            center: ['50%', '50%'],
                            data: [
                                {value: data.redCount, name: '红色性格'},
                                {value: data.yellowCount, name: '黄色性格'},
                                {value: data.blueCount, name: '蓝色性格'},
                                {value: data.greenCount, name: '绿色性格'},
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal: {
                                    color: function (params) {
                                        //自定义颜色
                                        var colorList = [
                                            '#FF0000', '#FFFF00', '#00ffff','#00FF00',
                                        ];
                                        return colorList[params.dataIndex]
                                    }
                                }

                            }

                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myecharts.setOption(option);
                layer.open({
                    type: 1,
                    offset: '10px',
                    title: "查看饼状图",
                    area: ['1000px', '600px'],
                    content: $("#drawtu"),  //弹窗中的内容
                    success:function () {
                        //弹出层打开后的回调函数
                        $("#downloadBtn").show()
                        $("#send").show()
                    },
                    end:function () {
                        //关闭时的回调函数
                        $("#drawtu").hide()
                        $("#downloadBtn").hide()
                        $("#send").hide()
                    }
                });
                // 发送邮箱
                $("#send").click(function () {
                    console.log(data)
                    $.ajax({
                        url:'/mail/sendMail'
                        ,contentType:"application/json;charset=UTF-8"
                        ,data:JSON.stringify(data)
                        ,data:{testerId: data.testerId,phonenum:data.phonenum,testerName:data.testerName,redCount:data.redCount,blueCount: data.blueCount,yellowCount: data.yellowCount,greenCount: data.greenCount}
                        // ,data:data.field
                        ,success:function (ret) {
                            layer.msg(ret.msg, {icon:6});
                        }

                    })
                })

            }
        });

        // 模糊查询
        form.on('submit(selectFormfilter)', function (data) {
            console.log(data.field)
            //当前容器的全部表单字段，名值对形式：{name: value}
            // 提交表单数据
            $.ajax({
                url: "/tester/selectAll",
                type: "POST",
                dataType: "JSON",
                data: data.field,
                // contentType:"application/json;charset=UTF-8",
                // data:JSON.stringify(data.field),
                success: function (ret) {
                    if (ret.code == 0) {
                        //刷新表格数据
                        myTable.reload({
                            where: { //设定异步数据接口的额外参数，任意设
                                testerName: data.field.testerName
                                , phonenum: data.field.phonenum
                            },
                            page: {
                                curr: 1
                                //重新从第 1 页开始
                            }
                        });
                    } else {
                        layer.msg(ret.msg, {icon: 5});
                    }
                }
            })
            return false;//阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });



        //重置条件查询表单，刷新table数据
        $("#myButton").click(function () {
            myTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    question: ""
                    , creator: ""
                    //…
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
    });
</script>
<script type="text/javascript">


    function downloadPdf() {
        var pdf = new jsPDF('p','pt','a4');
        //设置打印比例
        pdf.internal.scaleFactor = 0.5;
        var options = {
            pagesplit: true
            ,"background":'#FFFFFF'
        }

    var pringtHtml = $('#main').get(0);
    pdf.addHTML(pringtHtml,15,15,options,function () {
        pdf.save('性格测试.pdf')
    })
    }

</script>
</html>
